<!-- 待打包订单 - 详情 -->
<template>
  <div style="padding: 15px;">
    <el-form ref="form" :model="form" label-width="80px">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="订单号">
              <el-input v-model="form.code" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="来源单号">
              <el-input v-model="form.sourceCode" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="仓库" >
              <el-input v-model="form.warehouseName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="入驻商">
              <el-input v-model="form.shipmentName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="单据类型" >
              <el-input v-model="form.typeText" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="收货客户">
              <el-input v-model="form.customerName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="区域">
              <el-input v-model="form.receiverAddress"  style="width:75%" :disabled="true" />
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-form-item  label="详情地址">
              <el-input v-model="form.receiverDetailAddress" style="width:88%" :disabled="true" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="承运商">
              <el-input v-model="form.carrierName" style="width:75%"  :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item  label="运单号">
              <el-input v-model="form.waybillCode" style="width:75%" :disabled="true" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="16">
          <div class="grid-content bg-purple">
            <el-form-item  label="备注">
              <el-input v-model="form.remarks" style="width:88%" :disabled="true"  />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      resizable
      show-overflow
      ref="xTable"
      :span-method="objectSpanMethod"
      :align="allAlign"
      :data="tableData"
      show-footer
      :footer-method="footerMethod"
      :edit-config="{trigger: 'click', mode: 'cell'}">
      <vxe-table-column type="seq" width="60"></vxe-table-column>
      <!-- <vxe-table-column field="receiveCode" title="" width="0" ></vxe-table-column> -->
      <vxe-table-column field="goodsName" title="商品名称" width="270"></vxe-table-column>
      <vxe-table-column field="goodCode" title="商品编码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsBarCode" title="商品条码"  width="120"></vxe-table-column>
      <vxe-table-column field="goodsUnitName" title="单位" width="120"></vxe-table-column>
      <vxe-table-column field="totalNum" title="数量"  width="120"></vxe-table-column>
      <vxe-table-column field="locationName" title="分配库位"  width="120" ></vxe-table-column>
      <vxe-table-column field="distributionQuantity" title="分配数量"  width="120" ></vxe-table-column>
      <vxe-table-column field="pickingQuantity" title="拣货数量"  width="120" ></vxe-table-column>
      <vxe-table-column field="outboundQuantity" title="出库数量"  width="120" ></vxe-table-column>
      <vxe-table-column field="goodsStatusName" title="库存状态" width="120"></vxe-table-column>
      <vxe-table-column field="containerBarCode" title="容器号"  width="120"></vxe-table-column>
      <vxe-table-column field="gmtManufacture" title="生产日期" width="120"></vxe-table-column>
      <vxe-table-column field="gmtExpire" title="过期日期" width="120"></vxe-table-column>
      <vxe-table-column field="receiveLot" title="收货批次"  width="120"></vxe-table-column>
      <vxe-table-column field="remarks" title="备注"  width="120"></vxe-table-column>
    </vxe-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="funcSubmitCheck" plain>返 回</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import VXETablePluginElement from 'vxe-table-plugin-element'
  import {  deliveryDetail } from '@/api/outStorage'
  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })
  VXETable.use(VXETablePluginElement)
  export default {
    name: 'toPackedDetail',
    components: { },
    data() {
      return {
        allAlign:'center',
        spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
        pos: 0, // spanArr 的索引
        contentSpanArr: [],
        position: 0,
        form: {},
        loading: false,
        tableData: [],
        listQuery: {
          page: 1,
          limit: 13,
          totalzong: 0
        },
      }
    },
    created() {
      this.getInfo()
    },
    methods: {
      // 获取页面信息
      getInfo() {
        this.loading = true
        let code = this.$route.query.code ? this.$route.query.code : "";
        deliveryDetail(code).then(response => {
          this.form = response.data
          this.tableData = this.form.deliveryItemWithDistributionVOList
          this.form.receiverAddress = this.form.receiverProvince + ' ' + this.form.receiverCity + ' ' + this.form.receiverDistrict
          this.spanArr = [];
          this.contentSpanArr = [];
          for (var i = 0; i < this.tableData.length; i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0;
              this.contentSpanArr.push(1);
              this.position = 0;
            } else {
              // 判断当前元素与上一个元素是否相同(第1和第2列)
              if (this.tableData[i].goodCode == this.tableData[i - 1].goodCode &&
                this.tableData[i].goodsName == this.tableData[i - 1].goodsName &&
                this.tableData[i].goodsBarCode == this.tableData[i - 1].goodsBarCode &&
                this.tableData[i].goodsUnitName == this.tableData[i - 1].goodsUnitName &&
                this.tableData[i].totalNum == this.tableData[i - 1].totalNum
              ) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
          }
          this.loading = false
        })
      },
      // 返回
      funcSubmitCheck() {
        this.$router.push({
          path: "/pack/toPacked"
        });
      },
      // 表格合并行
      objectSpanMethod({ row, rowIndex,column,  columnIndex }) {
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 ) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },
      footerMethod ({ columns, data }) {
        return [
          columns.map((column, columnIndex) => {
            if (columnIndex === 1) {
              return '合计'
            }
            if (['totalNum'].includes(column.property)) {
              return this.form.totalNum
            }
            if (['distributionQuantity','pickingQuantity', 'outboundQuantity'].includes(column.property)) {
              return XEUtils.sum(data, column.property).toFixed(6)
            }
            return '-'
          })
        ]
      }
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin: 150px auto;
    width: 200px;
    // float: right;
  }
</style>

<style>
  .vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
    padding: 6px 0;
  }
  .vxe-toolbar{padding:0 0 10px 0}
</style>
